<template>
  <el-button  @click="dialogFormVisible = true">
    新增
  </el-button>

  <el-dialog v-model="dialogFormVisible" title="新增角色">
    <el-form v-model="form"  :ref="from" label-width="120px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="form.roleName" autocomplete="off" placeholder="请输入用户名称" style="width: 200px" />
      </el-form-item>
      <el-form-item label="角色描述" prop="roleDes">
        <el-input v-model="form.roleDes" autocomplete="off" placeholder="请描述一下角色职能" style="width: 200px"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="subRole">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogUpd" title="修改角色">
    <UpdRole :rowData="updForm"/>
  </el-dialog>

  <el-table :data="tableData" style="width: 1000px">
    <el-table-column prop="rid" label="rid" width="250px" />
    <el-table-column prop="roleName" label="角色名称" width="250px" />
    <el-table-column prop="roleDes" label="角色描述" width="250px"/>
    <el-table-column prop="do" label="操作" width="250px">
      <template #default="scope">
        <el-button  type="Info" color="#f6e8fc" circle @click="updRole(scope.row)"><el-icon><Edit/></el-icon></el-button>
        <el-button  type="danger" circle @click="delRole(scope.row.rid)"><el-icon><Delete/></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import UpdRole from "./updRole/index.vue";
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  data(){
    return{
      form:{
        roleName : null,
        roleDes : null
      },
      updForm:{
        roleName :null,
        roleDes :null
      }
      ,
      dialogUpd : false,
      tableData : null,
      dialogFormVisible : false
    }
  },created() {
    this.getRole()
  },
  components:{
    UpdRole
  },

  methods:{
    subRole(){
      this.dialogFormVisible=false;
      this.createRole()
    },
    updRole(row){
      console.log(row);
      this.updForm = row;
      this.dialogUpd = true;

    },
    delRole(id){
      axios({
        method:"DELETE",
        url:"http://39.101.199.5:8888/SuJiWords/role/delRole/"+id,

      }).then(response =>(ElMessage.success(response.data.msg),this.getRole()))
    }
    ,
    getRole(){
      axios({
        method:"GET",
        url:"http://39.101.199.5:8888/SuJiWords/role/selRole"
      }).then(response => (console.log(),this.tableData = response.data.data))
    },
    createRole(){
      axios({
        method : "POST",
        url:"http://39.101.199.5:8888/SuJiWords/role/createRole",
        data: JSON.stringify({"roleName":this.form.roleName, "roleDes":this.form.roleDes}),
        headers:{'Content-Type':'application/json;charser=UTF-8'}
      }).then(response =>(
          ElMessage.success(response.data.msg),
              this.getRole(),
              this.form.roleName == null,
              this.form.roleDes == null
      ))
    }

  }
}

</script>

<style scoped>

</style>